<!DOCTYPE html>
<!-- http://127.0.0.1:8080/test/main.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers MyMap Layer Example</title>
<link rel="stylesheet" href="../openlayers-2.12/theme/default/style.css"
	type="text/css">
<link rel="stylesheet"
	href="../openlayers-2.12/theme/default/google.css" type="text/css">
<link rel="stylesheet" href="../openlayers-2.12/examples/style.css"
	type="text/css">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>
<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
<script src="../openlayers-2.12/lib/OpenLayers.js"></script>
<script src="../openlayers-2.12/lib/deprecated.js"></script>
<script src=http://api.51ditu.com/js/maps.js></script>
<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
<script>
	var map; // 地图
	var vlayer; // 矢量层
	var vector; //定位层
	var geolocate; // 定位控件
	var style = {
		fillColor : '#000',
		fillOpacity : 0.1,
		strokeWidth : 0
	};
	function init() {
		OpenLayers.ProxyHost = "/cgi/proxy.cgi?url=";

		vlayer = new OpenLayers.Layer.Vector("点线面层");
		vector = new OpenLayers.Layer.Vector('定位标记层');
		map = new OpenLayers.Map('map', {
			controls : [ new OpenLayers.Control.PanZoom(),
					new OpenLayers.Control.EditingToolbar(vlayer) ]
		});
		geolocate = new OpenLayers.Control.Geolocate({
			bind : false,
			geolocationOptions : {
				enableHighAccuracy : false,
				maximumAge : 0,
				timeout : 7000
			}
		});
		map.addControl(geolocate);

		geolocate.events.register("locationupdated", geolocate, function(e) {
			vector.removeAllFeatures();
			console.info(e.position.coords.latitude + "::::"
					+ e.position.coords.longitude);
			var circle = new OpenLayers.Feature.Vector(
					OpenLayers.Geometry.Polygon
							.createRegularPolygon(
									new OpenLayers.Geometry.Point(e.point.x,
											e.point.y),
									e.position.coords.accuracy / 2, 40, 0), {},
					style);
			vector.addFeatures([ new OpenLayers.Feature.Vector(e.point, {}, {
				graphicName : 'cross',
				strokeColor : '#f00',
				strokeWidth : 2,
				fillOpacity : 0,
				pointRadius : 10
			}), circle ]);
			map.zoomToExtent(vector.getDataExtent());
			pulsate(circle);
			this.bind = true;
		});
		geolocate.events.register("locationfailed", this, function() {
			OpenLayers.Console.log('Location detection failed');
			alert("定位失败！");
		});

		//var gphy = new OpenLayers.Layer.Google("Google Physical", {
		//numZoomLevels : 18,
		//type : google.maps.MapTypeId.TERRAIN
		//});
		var gmap = new OpenLayers.Layer.Google("谷歌街道", {
			numZoomLevels : 18
		});
		//var ghyb = new OpenLayers.Layer.Google("谷歌混合", {
		//type : google.maps.MapTypeId.HYBRID,
		//numZoomLevels : 18
		//});
		//var gsat = new OpenLayers.Layer.Google("谷歌卫星", {
		//type : google.maps.MapTypeId.SATELLITE,
		//numZoomLevels : 18
		//});

		//var hmap = new OpenLayers.Layer.Baidu("百度混合图", {
		//type : "BMAP_HYBRID_MAP"
		//});

		//var bmap = new OpenLayers.Layer.Baidu("百度街道图", {
		//type : "BMAP_NORMAL_MAP"
		//});

		//var amap = new OpenLayers.Layer.Amap("高德街道图", {});

		//var smap = new OpenLayers.Layer.Soso("腾讯街道图", {});

		var somap = new OpenLayers.Layer.SosoSate("腾讯卫星", {});

		var lmap = new OpenLayers.Layer.Ditu51("灵图街道", {});

		var mmap = new OpenLayers.Layer.Mapabc("图盟科技", {});

		var tdt = new OpenLayers.Layer.Tianditu("天地图", {});

		var tdtm = new OpenLayers.Layer.TiandituMark("中文标记", {});

		//var tdts = new OpenLayers.Layer.TiandituSatellite("卫星图",{});

		var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
		renderer = (renderer) ? [ renderer ]
				: OpenLayers.Layer.Vector.prototype.renderers;
		var wfs = new OpenLayers.Layer.Vector("WFS示例", {
			strategies : [ new OpenLayers.Strategy.Fixed() ],
			projection : new OpenLayers.Projection("EPSG:4326"),
			visibility : false,
			renderers : renderer,
			styleMap : new OpenLayers.StyleMap({
				'default' : {
					strokeColor : "#00FF00",
					strokeOpacity : 1,
					strokeWidth : 3,
					fillColor : "#FF5500",
					fillOpacity : 0.5,
					pointRadius : 6,
					pointerEvents : "visiblePainted",
					//label : "${name}",

					fontSize : "18px",
					fontFamily : "宋体",
					fontWeight : "bold",
					labelAlign : "left",
					labelXOffset : "${xOffset}",
					labelYOffset : "${yOffset}",
					labelOutlineColor : "red",
					labelOutlineWidth : 1
				}
			}),
			protocol : new OpenLayers.Protocol.WFS({
				version : "1.0.0",
				url : "http://192.168.4.200:8080/geoserver/postgis/wfs",
				featureType : "movie",
				featurePrefix : "postgis",
				featureNS : "http://192.168.4.200:8080/postGis",
				srsName : "EPSG:4326",
				geometryName : "the_geom"
			})
		});
		selected = function(evt) {
			document.getElementById('result').innerHTML = "<font size='6' color='red'>你选择的兴趣点："
					+ evt.feature.data.name
					+ " <br>经度："
					+ evt.feature.data.longitude
					+ " <br>纬度："
					+ evt.feature.data.latitude + "</font>";
			longitude
		}
		wfs.events.register("featureselected", wfs, selected);
		var control = new OpenLayers.Control.SelectFeature(wfs, {
			clickout : true,
			toggle : true,
			multiple : false,
			hover : false,
			toggleKey : "ctrlKey", // ctrl key removes from selection
			multipleKey : "shiftKey", // shift key adds to selection
			box : false
		});
		map.addControl(control);
		control.activate();

		var beijing = new OpenLayers.Layer.Vector("北京行政区", {
			strategies : [ new OpenLayers.Strategy.Fixed() ],
			projection : new OpenLayers.Projection("EPSG:4326"),
			visibility : false,
			renderers : renderer,
			styleMap : new OpenLayers.StyleMap({
				'default' : {
					strokeColor : "#00FF00",
					strokeOpacity : 1,
					strokeWidth : 3,
					fillColor : "#FF5500",
					fillOpacity : 0.5,
					pointRadius : 6,
					pointerEvents : "visiblePainted",
					//label : "${name}",

					fontSize : "18px",
					fontFamily : "宋体",
					fontWeight : "bold",
					labelAlign : "left",
					labelXOffset : "${xOffset}",
					labelYOffset : "${yOffset}",
					labelOutlineColor : "red",
					labelOutlineWidth : 1
				}
			}),
			protocol : new OpenLayers.Protocol.WFS({
				version : "1.0.0",
				url : "http://192.168.4.200:8080/geoserver/postgis/wfs",
				featureType : "beijing_province_2006",
				featurePrefix : "postgis",
				featureNS : "http://192.168.4.200:8080/postGis",
				srsName : "EPSG:4326",
				geometryName : "the_geom"
			})
		});
		selectedbeijing = function(evt) {
			document.getElementById('result').innerHTML = "<font size='10' color='red'>你选择的区域："
					+ evt.feature.data.cnty_nm + "</font>";
		}
		beijing.events.register("featureselected", null, selectedbeijing);
		var controlbeijing = new OpenLayers.Control.SelectFeature(beijing, {
			clickout : true,
			toggle : true,
			multiple : false,
			hover : false,
			toggleKey : "ctrlKey", // ctrl key removes from selection
			multipleKey : "shiftKey", // shift key adds to selection
			box : false
		});
		map.addControl(controlbeijing);
		controlbeijing.activate();

		var bj = new OpenLayers.Layer.WMS("混合图层",
				"http://192.168.4.200:8080/geoserver/wms", {
					LAYERS : 'beijing',
					STYLES : '',
					format : "image/jpeg",
					tiled : true,
					transparent : true
				}, {
					buffer : 0,
					displayOutsideMaxExtent : true,
					isBaseLayer : false,
					visibility : false,
					yx : {
						'EPSG:4326' : true
					}
				});
		var gml = new OpenLayers.Layer.Vector(
				"GML图层",
				{
					protocol : new OpenLayers.Protocol.HTTP(
							{
								url : "http://192.168.4.200:8080/geoserver/postgis/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=postgis:prc_popplaces&maxFeatures=500",
								format : new OpenLayers.Format.GML()
							}),
					strategies : [ new OpenLayers.Strategy.Fixed() ],
					visibility : false
				});

		var china_popplaces = new OpenLayers.Layer.WMS("全国地区分布",
				"http://192.168.4.200:8080/geoserver/postgis/wms", {
					LAYERS : 'postgis:prc_popplaces',
					STYLES : '',
					format : "image/jpeg",
					tiled : true,
					transparent : true
				}, {
					buffer : 0,
					displayOutsideMaxExtent : true,
					isBaseLayer : false,
					visibility : false,
					yx : {
						'EPSG:4326' : true
					}
				});

		var wuxi_hotel = new OpenLayers.Layer.WMS("北京饭店",
				"http://59.108.107.51:8910/geoserver/huabo/wms", {
					LAYERS : 'huabo:beijing_restaurant',
					STYLES : '',
					format : "image/jpeg",
					tiled : true,
					transparent : true
				}, {
					buffer : 0,
					displayOutsideMaxExtent : true,
					isBaseLayer : false,
					visibility : false,
					yx : {
						'EPSG:4326' : true
					}
				});

		var wuxi_zoning = new OpenLayers.Layer.WMS("全国各地",
				"http://59.108.107.51:8910/geoserver/huabo/wms", {
					LAYERS : 'huabo:prc_popplaces',
					STYLES : '',
					format : "image/jpeg",
					tiled : true,
					transparent : true
				}, {
					buffer : 0,
					displayOutsideMaxExtent : true,
					isBaseLayer : false,
					visibility : false,
					yx : {
						'EPSG:4326' : true
					}
				});

		var beijing_universities = new OpenLayers.Layer.WMS("北京大学",
				"http://59.108.107.51:8910/geoserver/huabo/wms", {
					LAYERS : 'huabo:universities_in_beijing',
					STYLES : '',
					format : "image/jpeg",
					tiled : true,
					transparent : true
				}, {
					buffer : 0,
					displayOutsideMaxExtent : true,
					isBaseLayer : false,
					visibility : false,
					yx : {
						'EPSG:4326' : true
					}
				});

		var beijing_province_2006 = new OpenLayers.Layer.WMS("北京区划",
				"http://59.108.107.51:8910/geoserver/huabo/wms", {
					LAYERS : 'huabo:beijing_province_2006',
					STYLES : '',
					format : "image/jpeg",
					tiled : true,
					transparent : true
				}, {
					buffer : 0,
					displayOutsideMaxExtent : true,
					isBaseLayer : false,
					visibility : false,
					yx : {
						'EPSG:4326' : true
					}
				});

		var drawControls = {
			point : new OpenLayers.Control.DrawFeature(wfs,
					OpenLayers.Handler.Point),
			line : new OpenLayers.Control.DrawFeature(wfs,
					OpenLayers.Handler.Path),
			polygon : new OpenLayers.Control.DrawFeature(wfs,
					OpenLayers.Handler.Polygon)
		};
		for ( var key in drawControls) {
			map.addControl(drawControls[key]);
		}
		toggleControl = function(element) {
			for (key in drawControls) {
				var control = drawControls[key];
				if (element.value == key && element.checked) {
					control.activate();
				} else {
					control.deactivate();
				}
				if (element.value == "cancel") {
					control.deactivate();
				}
			}
		};

		var size = new OpenLayers.Size(25, 25);
		var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
		var icon = new OpenLayers.Icon('/img/GreenDot.png', size, offset);

		getMarker = function(lng, lat, name, open) {
			var marker = new OpenLayers.Marker(new OpenLayers.LonLat(lng, lat)
					.transform(new OpenLayers.Projection("EPSG:4326"), map
							.getProjectionObject()), icon.clone())
			marker.events.remove("mousedown");
			popupClass = OpenLayers.Popup.FramedCloud;
			popupContentHTML = name;
			feature = new OpenLayers.Feature(markers, marker.lonlat);
			feature.closeBox = true;
			feature.popupClass = popupClass;
			feature.data.popupContentHTML = popupContentHTML;
			feature.data.autoSize = true;
			var popup = feature.createPopup(feature.closeBox);
			map.addPopup(popup);
			if (!open) {
				popup.hide();
			}
			var markerClick = function(evt) {
				popup.toggle();
				OpenLayers.Event.stop(evt);
			};
			marker.events.register("mousedown", feature, markerClick);
			return marker;
		};

		map.addLayers([ lmap, tdt, gmap, mmap, vector, vlayer, wuxi_hotel,
				wuxi_zoning, beijing_universities, beijing_province_2006 ]);
		map.setCenter(new OpenLayers.LonLat(116.31444444444445,
				39.96055555555556).transform(new OpenLayers.Projection(
				"EPSG:4326"), map.getProjectionObject()), 10);
		map.addControl(new OpenLayers.Control.LayerSwitcher());

		var markers = new OpenLayers.Layer.Markers("自定义点");
		markers.addMarker(getMarker(120.142, 30.1714, "曹志富", false));
		markers.addMarker(getMarker(111.6626, 40.8172, "冯晓婷", false));
		markers.addMarker(getMarker(116.3144, 39.9605, "胡文华", false));
		map.addLayer(markers);

		map.setCenter(new OpenLayers.LonLat(116.3144, 39.9605).transform(
				new OpenLayers.Projection("EPSG:4326"), map
						.getProjectionObject()), 10);

		//注册天地图可见变化事件，选择天地图时同时添加对应的中文标记图层，否则取消该图层
		tdt.events.register('visibilitychanged', null, function(e) {
			var visibility = e.object.getVisibility();
			if (visibility) {
				map.addLayers([ tdtm ]);
			} else {
				map.removeLayer(tdtm);
			}
		});

		china_popplaces.events
				.register(
						'visibilitychanged',
						null,
						function(ee) {
							var visibility = ee.object.getVisibility();
							if (visibility) {
								map.events
										.register(
												'click',
												null,
												function(e) {
													document
															.getElementById('shortdesc').innerHTML = "Loading... please wait...";
													var params = {
														REQUEST : "GetFeatureInfo",
														EXCEPTIONS : "application/vnd.ogc.se_xml",
														BBOX : map.getExtent()
																.toBBOX(),
														SERVICE : "WMS",
														INFO_FORMAT : 'text/html',
														QUERY_LAYERS : map.layers[6].params.LAYERS,
														FEATURE_COUNT : 50,
														Layers : 'postgis:prc_popplaces',
														WIDTH : map.size.w,
														HEIGHT : map.size.h,
														format : "image/png",
														styles : map.layers[6].params.STYLES,
														srs : map.layers[6].params.SRS
													};
													if (map.layers[6].params.VERSION == "1.3.0") {
														params.version = "1.3.0";
														params.j = e.xy.x;
														params.i = e.xy.y;
													} else {
														params.version = "1.1.1";
														params.x = Math
																.floor(e.xy.x);
														params.y = Math
																.floor(e.xy.y);
													}

													if (map.layers[6].params.CQL_FILTER != null) {
														params.cql_filter = map.layers[6].params.CQL_FILTER;
													}
													if (map.layers[6].params.FILTER != null) {
														params.filter = map.layers[6].params.FILTER;
													}
													if (map.layers[6].params.FEATUREID) {
														params.featureid = map.layers[6].params.FEATUREID;
													}
													OpenLayers
															.loadURL(
																	"http://192.168.4.200:8080/geoserver/postgis/wfs",
																	params,
																	this,
																	setHTML,
																	setHTML);
													OpenLayers.Event.stop(e);
												});
							} else {
								map.events.remove('click');
							}
							OpenLayers.Event.stop(ee);
						});

	};
	setHTML = function(response) {
		document.getElementById('shortdesc').innerHTML = "Demonstrate use the Mapabc/Amap/Google/Ditu51/Soso Maps API.";
		document.getElementById('result').innerHTML = response.responseText;
	};

	var pulsate = function(feature) {
		var point = feature.geometry.getCentroid(), bounds = feature.geometry
				.getBounds(), radius = Math
				.abs((bounds.right - bounds.left) / 2), count = 0, grow = 'up';

		var resize = function() {
			if (count > 16) {
				clearInterval(window.resizeInterval);
			}
			var interval = radius * 0.03;
			var ratio = interval / radius;
			switch (count) {
			case 4:
			case 12:
				grow = 'down';
				break;
			case 8:
				grow = 'up';
				break;
			}
			if (grow !== 'up') {
				ratio = -Math.abs(ratio);
			}
			feature.geometry.resize(1 + ratio, point);
			vector.drawFeature(feature);
			count++;
		};
		window.resizeInterval = window.setInterval(resize, 50, point, radius);
	};

	locate = function() {
		geolocate.deactivate();
		geolocate.activate();
	};

	removeFeatures = function() {
		vlayer.removeAllFeatures();
	};

	removeLocate = function() {
		vector.removeAllFeatures();
	};
</script>
<style>
.smallmap {
	width: 630px;
	height: 396px;
	border: 1px solid #CCC;
}
</style>
</head>
<body onload="init()">
	<h1 id="title">地图2.0版综合测试</h1>
	<div id="tags">Baidu, api key, apikey, light</div>
	<p id="shortdesc">Demonstrate use the
		Mapabc/Amap/Google/Ditu51/Soso Maps API.</p>
	<div style="float: left; width: 630px; height: 800px;">
		<div id="map" class="smallmap"></div>
		<div id="result" class="smallmap"></div>
	</div>
	<div style="float: left; width: 630px; height: 800px;">
		<div id="panel" class="smallmap">
			<button onclick="removeFeatures()">清除点线面</button>
			<button onclick="removeLocate()">清除定位标记</button>
			<button onclick="locate()">定位</button>
		</div>
	</div>

</body>
</html>
